<template>
  <div class="content">
    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <!-- <div class="box-header">
            <h3 class="box-title">项目列表</h3>
          </div> -->
          <el-form :inline="true" :model="listQuery" class="demo-form-inline" label-width="75px">
            <el-form-item label="项目名称" prop="serviceName">
              <el-input v-model.trim="listQuery.serviceName" placeholder="请输入项目名称" clearable style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="供应商" prop="supplierName">
              <el-input v-model.trim="listQuery.supplierName" placeholder="请输入供应商" clearable style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item>
              <button class="btn btn-default" type="button" @click="listSearch">查询</button>
              <el-upload
                    class="upload-demo"
                    action=""
                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    :http-request="uploadFile"
                    :show-file-list="false"
                    multiple>
                    <button class="btn btn-import bg-green" type="button">导入</button>
              </el-upload>
              <button class="btn btn-lg bg-green" type="button" @click="addProject"><i class="entypo-pencil"></i>添加</button>
            </el-form-item>
          </el-form>

          <div class="box-body">
            <div class="table-responsive">
              <el-table
                :key="tableKey"
                v-loading="listLoading"
                :data="list"
                border
                fit
                stripe
                highlight-current-row
                style="width: 100%;"
              >
                <el-table-column
                  label="项目名称"
                  prop="serviceName"
                  align="left"
                  min-width="200">
                </el-table-column>
                <el-table-column
                  label="项目内容简介"
                  prop="serviceIntr"
                  align="left"
                  min-width="240">
                </el-table-column>
                <el-table-column
                  label="使用流程"
                  prop="serviceProcess"
                  align="left"
                  min-width="240">
                </el-table-column>
                <el-table-column
                  label="使用通道"
                  prop="serviceChannel"
                  align="left"
                  min-width="240">
                </el-table-column>
                <el-table-column
                  label="项目供应商"
                  prop="supplierName"
                  align="left"
                  min-width="100">
                </el-table-column>
                <el-table-column
                  label="状态"
                  align="left"
                  min-width="80">
                  <template slot-scope="scope">
                    <span>{{scope.row.serviceStatus == 0 ? '正常':'暂停'}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="110">
                  <template slot-scope="scope">
                    <el-button class="btn1" @click="handleEditRow(scope.row)" type="text">修改</el-button>
                    <el-button class="btn1" @click="handleDeleteRow(scope.row)" type="text">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="box-footer clearfix">
            <!-- 控制分页模块 -->
            <pagination align="right" v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/修改 -->
    <el-dialog
      :visible.sync="projectVisible"
      v-if="projectVisible"
      :show-close="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="600px"
      style="margin-top: -5vh;"
      >
      <div class="modal-header bg-white">
        <h4 id="myLargeModalLabel" class="modal-title">
          <span class="profile-rounded"><i class="fontello-wrench-outline"></i>
          </span>&nbsp;&nbsp; {{title}}
        </h4>
      </div>
      <el-form v-if="isEdit" ref="projectVisibleForm" class="clearfix modal-body" :model="listRow" :rules="rules" label-width="100px">
        <el-form-item style="flex-shrink: 0;" label="项目名称" prop="serviceName">
          <el-input
            v-model="listRow.serviceName"
            :maxlength="200"
            placeholder="项目名称"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="项目内容介绍" prop="serviceIntr">
          <el-input
            v-model="listRow.serviceIntr"
            type="textarea"
            autosize
            :title="listRow.serviceIntr"
            placeholder="项目内容介绍"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="项目使用流程" prop="serviceProcess">
          <el-input
            v-model="listRow.serviceProcess"
            type="textarea"
            autosize
            :title="listRow.serviceProcess"
            placeholder="项目使用流程"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="项目使用通道" prop="serviceChannel">
          <el-input
            v-model="listRow.serviceChannel"
            type="textarea"
            autosize
            placeholder="项目使用通道"
            :title="listRow.serviceChannel"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="供应商" prop="supplierID">
          <el-select v-model="listRow.supplierID" placeholder="供应商" style="width: 100%;" @change="changeSupplier">
            <el-option v-for="item in supplierOptions" :key="item.supplierID" :label="item.supplierName" :value="item.supplierID" />
          </el-select>
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="状态" prop="serviceStatus">
          <el-select v-model="listRow.serviceStatus" placeholder="状态" style="width: 100%;">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <div class="attribute-operation clearfix fr">
          <button class="btn bg-aqua" type="button" @click="saveService('projectVisibleForm')">保存</button>
          <button class="btn btn-default close-btn" type="button" @click="closeWriteoOffVisible">关闭</button>
        </div>
      </el-form>

      <el-form v-else ref="projectVisibleForm" class="clearfix modal-body" :model="listRow" :rules="rules">
        <el-form-item style="flex-shrink: 0;" label="" prop="serviceName">
          <el-input
            v-model="listRow.serviceName"
            :maxlength="200"
            placeholder="项目名称"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="serviceIntr">
          <el-input
            v-model="listRow.serviceIntr"
            type="textarea"
            autosize
            placeholder="项目内容介绍"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="serviceProcess">
          <el-input
            v-model="listRow.serviceProcess"
            type="textarea"
            autosize
            placeholder="项目使用流程"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="serviceChannel">
          <el-input
            v-model="listRow.serviceChannel"
            type="textarea"
            autosize
            placeholder="项目使用通道"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="supplierID">
          <el-select v-model="listRow.supplierID" placeholder="供应商" style="width: 100%;" @change="changeSupplier">
            <el-option v-for="item in supplierOptions" :key="item.supplierID" :label="item.supplierName" :value="item.supplierID" />
          </el-select>
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="serviceStatus">
          <el-select v-model="listRow.serviceStatus" placeholder="状态" style="width: 100%;">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <div class="attribute-operation clearfix fr">
          <button class="btn bg-aqua" type="button" @click="saveService('projectVisibleForm')">保存</button>
          <button class="btn btn-default close-btn" type="button" @click="closeWriteoOffVisible">关闭</button>
        </div>
      </el-form>
    </el-dialog>
    <!-- /添加/修改 -->
  </div>
</template>

<script>
import { getPageService, saveService, updateService } from '@/api/supplierManagement/project'
import { getSupplier } from '@/api/supplierManagement/supplier'
import { upLoadServiceDef } from '@/api/common'
import { parseTime } from '@/utils/ruoyi'
import Pagination from '@/components/Pagination'

export default {
  name: 'Projects',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      title: '添加项目',
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        serviceName: null,
        supplierName: null
      },
      listRow: {
        serviceName: null,
        serviceIntr: null,
        serviceProcess: null,
        serviceChannel: null,
        serviceStatus: null,
        supplierID: null,
        supplierName: null
      },
      rules: {
        serviceName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        supplierID: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ]
      },
      isEdit: false,
      projectVisible: false,
      getName: '',
      statusOptions: [
        {
          label: '正常',
          value: 0
        },
        {
          label: '暂停',
          value: 1
        }
      ],
      supplierOptions: []
    }
  },
  created() {
    getSupplier().then(res => {
      this.supplierOptions = res
    })
    this.getList()
    // this.list = this.pageInfo.list
    // this.total = this.pageInfo.total
  },
  methods: {
    getList() {
      this.listLoading = true

      getPageService(this.listQuery).then(response => {
        this.listLoading = false
        this.list = response.content
        this.total = response.totalElements
      })
      .catch(() => {
        this.listLoading = false
      })
    },
    reset() {
      this.listQuery = {
        pageNum: 1,
        pageSize: 10,
        serviceName: null,
        supplierName: null
      }
    },
    // 查询
    listSearch() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    // 导入
    uploadFile(item) {
      const form = new FormData();
      form.append('file', item.file);
      upLoadServiceDef(form).then(res => {
        if (res.success == 'SUCCESS') {
          this.msgSuccess('导入成功!')
          this.reset()
          this.getList(); //导入成功刷新列表
        }else if (res.success == 'FALSE'){
          this.msgError(res.message)
        }
      }).catch(err => {
        this.msgError(err)
      })
    },
    // 添加项目
    addProject() {
      if (this.supplierOptions.length == 0) {
        this.msgWarn('请先添加供应商')
      }else{
        this.title = '添加项目'
        this.getName = null
        this.listRow = {
          serviceName: null,
          serviceIntr: null,
          serviceProcess: null,
          serviceChannel: null,
          serviceStatus: null,
          supplierID: null,
          supplierName: this.getName
        }
        this.isEdit = false
        this.projectVisible = true
      }
    },
    // 关闭
    closeWriteoOffVisible() {
      this.projectVisible = false
    },

    changeSupplier(val) {
      let obj = {};
      if (val) {
        obj = this.supplierOptions.find((item)=>{
          return item.supplierID === val;
        });
        this.getName = obj.supplierName
      }else{
        this.getName = null
      }
      this.listRow.supplierName = this.getName
    },
    // 修改
    handleEditRow(row) {
      // console.log(row)
      if (row.supplierID) {
        if (this.supplierOptions) {
          let obj = {};
          obj = this.supplierOptions.find((item)=>{
            return item.supplierID === row.supplierID;
          });
          this.getName = obj.supplierName
        }else{
          this.getName = row.supplierName
        }
      }else{
        this.getName = null
      }
      this.title = '修改项目'
      this.listRow = {
        serviceID: row.serviceID,
        serviceName: row.serviceName,
        serviceIntr: row.serviceIntr,
        serviceProcess: row.serviceProcess,
        serviceChannel: row.serviceChannel,
        serviceStatus: row.serviceStatus,
        supplierID: row.supplierID,
        supplierName: this.getName
      }
      this.isEdit = true
      this.projectVisible = true
    },
    // 保存
    saveService(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.listRow.serviceID) {
            updateService(this.listRow).then(res=>{
              this.msgSuccess('修改成功')
              this.projectVisible = false
              this.reset()
              this.getList()
            })
          }else{
            saveService(this.listRow).then(res=>{
              this.msgSuccess('添加成功')
              this.projectVisible = false
              this.reset()
              this.getList()
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 删除
    handleDeleteRow(row) {
      // console.log(row)
      this.getName = null
      // if (row.supplierID) {
      //   if (this.supplierOptions) {
      //     let obj = {};
      //     obj = this.supplierOptions.find((item)=>{
      //       return item.supplierID === row.supplierID;
      //     });
      //     this.getName = obj.supplierName
      //   }else{
      //     this.getName = row.supplierName
      //   }
      // }else{
      //   this.getName = null
      // }
      let params = {
        serviceID: row.serviceID,
        serviceName: row.serviceName,
        serviceIntr: row.serviceIntr,
        serviceProcess: row.serviceProcess,
        serviceChannel: row.serviceChannel,
        serviceStatus: 2,
        supplierID: row.supplierID,
        supplierName: this.getName
      }
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateService(params).then(res=>{
            this.msgSuccess('删除成功')
            this.projectVisible = false
            this.reset()
            this.getList()
          })
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
  .el-table thead{
    color: #888888;
    font-size: 13px;
  }
  .el-table tr{
    color: #888888;
    font-size: 13px;
  }
  .el-table--medium th{
    padding: 8px 0;
  }
  .el-table--medium td{
    padding: 8px 0;
  }
  .btn1{
    color: #37A8AF;
    font-size: 13px;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td{
    background: #f3f4f5;
  }
  .el-pagination{
    padding: 0;
    margin-right: -4px;
  }
  .pagination-container{
    padding: 0;
    margin: 0;
  }
  .el-dialog__header{
    display: none;
  }
  .el-dialog__body{
    padding: 25px 30px 60px;
    font-size: 13px;
    color: #888888;
  }
  .modal-body{
    padding: 20px;
  }
  .el-dialog{
    width: 95%;
    margin-top: 10vh !important;
  }
  .el-form-item{
    margin-bottom: 15px;
  }
  .el-input__inner{
    color: #555555;
    border: 1px solid #cccccc;
  }
}
/deep/.el-form-item__error{
  padding-top: 1px;
}
.demo-form-inline{
  padding: 40px 0 0 35px;
}
.box{
  margin-bottom: 0;
}
.box-body{
  padding-top: 0;
}
.btn-default{
  margin-right: 10px;
}
.btn-import{
  margin-right: 10px;
}
.close-btn{
  margin-right: 0px;
  margin-left: 10px;
}
.upload-demo{
  display: inline-block;
}
</style>
